<template>
  <div>
    <!-- 添加列表 -->
    <div>
      <input type="text" v-model="something" /><button @click="addlist">
        添加
      </button>
    </div>
    <!-- 待办事项 -->
    <div>
      <ul>
        <li
          :class="item.status ? 'over' : ''"
          v-for="(item, index) in dolist"
          :key="index"
        >
          {{ item.msg }}
          <button @click="over(index)">
            {{ item.status ? "已完成" : "未完成" }}
          </button>
          <button @click="del(item)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
let dolist = ref([{ msg: "待办事项", status: false }]);
let something = ref("");
let addlist = () => {
  if (something.value) {
    dolist.value.push({ msg: something.value, status: false });
    something.value = "";
  } else {
    console.log("没有添加任何东西");
  }
};
let del = (val) => {
  let res = dolist.value.findIndex((item) => {
    return item == val;
  });
  dolist.value.splice(res, 1);
};
let over = (i) => {
  dolist.value[i].status = !dolist.value[i].status;
};
</script>
<style scoped>
.over {
  color: red;
}
</style>
